<script setup lang="ts">
import {ref} from "vue";
import {captcha} from "@/api/more";

const show = ref(false);

function Random(){
    // captcha().then(res=>{
    //     console.log(res)
    // })
}

const flag = ref(true)
function close(){
    flag.value = !flag.value
}
</script>

<template>
    <div>
        <div class="Commodity1">
            <!--中将礼品 -->
            <div class="gift">
                <h5>拉杆箱一个</h5>
                <p>2023.01.15 14:22</p>
            </div>
            <!--兑换码 -->
            <van-button type="primary" text="兑换码" @click="show = true"  class="DHM" />
            <van-overlay :show="show" @click="show = false" v-show="flag">
                <div class="wrapper" @click.stop >
                    <div class="block">
                        <img src="@/assets/images/错号.png" alt="" class="imgWz" @click="close">
                        <h3>兑换码</h3>
                        <button @click="Random">451aska4</button>
                        <p>请截图后联系工作人员进行兑换</p>
                        <div class="contact">
                            <div class="left">
                                <img src="@/assets/images/组 12(1).png" alt="">
                                <span>客服1：7654321112</span>
                            </div>
                            <div class="right">
                                <img src="@/assets/images/组 12(1).png" alt="">
                                <span>客服2：1234567776</span>
                            </div>
                        </div>
                    </div>
                </div>
            </van-overlay>
        </div>
    </div>
</template>

<style scoped lang="less">
.Commodity1{
    width: 270px;
    height: 40px;
    margin: auto;
    //background-color: #c81127;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .gift{
        width: 100px;
        height: 30px;
        //background-color: #c81127;

        h5{
            color:#9f5229;
            font-size: 14px;
        }
        p{
            color: #9f5229;
            font-size: 10px;
        }

    }
    .redeemCodes{
        //width: 40px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        //border: 1px solid #ed440f;
    }
    .DHM{
        width: 60px;
        height: 20px;
        color: #c81127;
        font-size: 7px;
        text-align: center;
        line-height: 20px;
        letter-spacing: 2px;
        background-color: transparent;
    }
}

//兑换码部分
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .block {
        width: 270px;
        height: 180px;
        border-radius: 10px;
        background-color: #fffae6;
        position: relative;

        .imgWz{
            position: absolute;
            right: 10px;
            top: 5px;
        }

        h3{
            color: #9f532a;
            text-align: center;
            margin-top: 5px;
            font-size: 16px;
        }

        button{
            width: 150px;
            height: 30px;
            margin-left:60px;
            margin-top: 20px;
            font-size: 11px;
            background-color: #fbebe1;
            border-color: #c81127;
        }

        p{
            color: black;
            text-align: center;
            font-size: 10px;
            line-height: 50px;
        }
        .contact{
            width: 210px;
            height: 20px;
            margin: auto;
            display: flex;
            justify-content: space-between;

            .left,
            .right{
                width: 100px;
                height: 100%;
                background-color: #ffe3a4;
                border-radius: 20px;
                //background-image: url("@/assets/images/矩形 1929.png");
                //background-size: 100px 32px;
                //background-repeat: no-repeat;

                img{
                    width: 20px;
                    height: 20px;
                    vertical-align: middle;
                }

                span{
                    font-size: 8px;
                }

            }
        }
    }
}


</style>